<script lang="ts" setup>
import { useRouter } from "vue-router";
import { NavBar } from "vant";
// import CompanyLogo from "/lucky-games-logo.png";

defineProps<{
  title: string;
  rightIcon?: string;
  rightIconClickCb?: () => void;
}>();
const router = useRouter();
const goBack = () => {
  router.back();
};
function returnPage() {
  //router.go(-1);
  router.back();
}
</script>
<template>
  <NavBar left-arrow class="header-bar" @click-left="goBack">
    <template #title>
      <!-- 6667
      <img v-if="!title" :src="CompanyLogo" :alt="CompanyLogo" height="21" />
      <span v-else class="title" style="color: var(--header-color)">
        {{ title }}
      </span> -->
      <div class="navigation-frame">
        <div class="daohng-frame">
          <div class="daohng-content">
            <div class="fanhui-frame df ai-center jc-center">
              <img class="fanhui" src="@/image/new_img/huitui_bai.png" @click="returnPage" />
            </div>
            <div class="title-frame">{{ title }}</div>
            <div class="fanhui"></div>
          </div>
        </div>
      </div>
    </template>
    <!-- <template #right>
      <img
        v-if="rightIcon"
        :src="rightIcon"
        :alt="rightIcon"
        height="21"
        @click="rightIconClickCb"
      />
    </template> -->
  </NavBar>
</template>
<style scoped lang="less">
@import "@/styles/variable.less";

.header-bar {
  // height: @HeaderHeight;
  height: 105px;
  //background-color: var(--back-header-background);
  background-color: #1b0a24;
  :deep(.van-nav-bar) .van-icon {
    color: green;
  }

  .title {
    font-weight: 500;
    font-size: 18px;
  }

  &:after {
    border-bottom-width: 0;
  }
}
.navigation-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 105px;
  z-index: 5555;
  overflow-y: auto;
  background-color: #1b0a24 !important;
  .daohng-frame {
    width: 100%;
    // background-image: url(@/image/new_img/navv2_navbg.png);
    background-size: 100% 100%;
    object-fit: cover;
    height: 105px;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 5555;
    left: 0;
    right: 0;
    top: 0;
    background-color: #1b0a24 !important;
  }
  .daohng-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
  }
  .fanhui-frame {
    width: 75px;
    height: 75px;
    margin-left: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
  }
  .fanhui {
    width: 41px;
    height: 41px;
  }
  .title-frame {
    font-size: 32px;
    color: #fff;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "-apple-system, BlinkMa";
    padding-right: 70px;
    font-weight: 400;
  }
}
</style>
